@font-face {
	font-family: '<%= fontName %>';
	src: url('atom://seti-ui/styles/_fonts/seti/<%= fontName %>.eot');
	src: url('atom://seti-ui/styles/_fonts/seti/<%= fontName %>.eot?#iefix') format('eot'),
		// url('atom://seti-ui/styles/_fonts/seti/<%= fontName %>.woff2') format('woff2'),
		url('atom://seti-ui/styles/_fonts/seti/<%= fontName %>.woff') format('woff'),
		url('atom://seti-ui/styles/_fonts/seti/<%= fontName %>.ttf') format('truetype'),
		url('atom://seti-ui/styles/_fonts/seti/<%= fontName %>.svg#<%= fontName %>') format('svg');
		font-weight: normal;
		font-style: normal;
}

.<%= cssClass%>-base-pseudo {
	font-family: '<%= fontName %>';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
}

.<%= cssClass%>-char(@filename) {
	<% _.each(glyphs, function(glyph) { %>@<%= glyph.fileName %>: '\<%= glyph.codePoint %>';
	<% }); %>
	content: @@filename;
}

.<%= cssClass%>(@filename, @color: @white, @insert: before) {
	@pseudo-selector: ~':@{insert}';

	&@{pseudo-selector} {
		&:extend(.<%= cssClass%>-base-pseudo);
		.<%= cssClass%>-char(@filename);
		color: @color;
	}
}

<% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %> {
	.<%= cssClass%>(<%= glyph.fileName %>);
}
<% }); %>
